import React, {Component} from 'react';
import {View, StyleSheet, Alert, Text, TouchableOpacity, TextInput, Image, Platform, ScrollView} from  'react-native';
import Detail from  './HomeDetail';
import TopView from  './HomeTopView';
import MiddleView from './HomeMiddleView';
import TopClassificationView from './HomeTopClassificationView';
import GeustYouLike from './HomeGeustYouLike';
import ShopCenter from './HomeShopCenter';
import ShopCenterDetailView from './ShopCenterDetailView';
let ImageDing = require('../../img/icon_homepage_message.png');
let ImageScan = require('../../img/icon_homepage_scan.png');

let dimension = require('Dimensions');
let {width, height} = dimension.get('window');

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this._onPressButton = this._onPressButton.bind(this);
    }

    _onPressButton(data) {
        this.props.navigator.push(
            {
                component: Detail,
                title: "测试"
            }
        );
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderNavBar()}
                <ScrollView>
                    <TopClassificationView/>
                    <TopView/>
                    <MiddleView popTopHome={(data)=>{this._onPressButton(data)}}/>
                    <ShopCenter popToHomeView={(url)=>this.pushToShopCenterDetail(url)}/>
                    <GeustYouLike/>
                </ScrollView>
            </View>
        )
    }

    renderNavBar() {
        return (
            <View style={styles.navBarStyle}>
                <TouchableOpacity onPress={()=>{alert("asdasd")}}>
                    <Text style={{color:'white'}}>南宁</Text>
                </TouchableOpacity>
                <TextInput placeholder="请输入搜索内容" style={styles.topInputStyle} underlineColorAndroid='transparent'/>
                <View style={styles.navImageStyle}>
                    <TouchableOpacity onPress={this._onPressButton}>
                        <Image source={ImageDing} style={styles.navRightImgStyle}/>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={this._onPressButton}>
                        <Image source={ImageScan} style={styles.navRightImgStyle}/>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    pushToShopCenterDetail(url) {
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                component: ShopCenterDetailView,
                name: 'ShopCenterDetailView',
                params: {
                    url: Home.dealWithUrl(url),
                }
            })
        }
    }

    static dealWithUrl(url) {
        return url.replace('imeituan://www.meituan.com/web/?url=', '');
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    topInputStyle: {
        width: width * 0.71,
        height: Platform.OS == 'ios' ? 35 : 30,
        backgroundColor: 'white',
        marginTop: Platform.OS == 'ios' ? 18 : 0,
        borderRadius: 10,
        paddingLeft: 10,
        fontSize: 13,
        paddingBottom: 5
    },
    navRightImgStyle: {
        width: Platform.OS == 'ios' ? 28 : 24,
        height: Platform.OS == 'ios' ? 28 : 24,

    },
    navBarStyle: {
        height: Platform.OS == 'ios' ? 64 : 50,
        backgroundColor: 'rgba(255,96,0,1.0)',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    navImageStyle: {
        flexDirection: 'row',
        height: 64,
        alignItems: 'center'
    }
});